<template>
    <a-date-picker :show-time="props.showTime" @change="inputVal" allowClear class="w-full" v-model:value="value" :picker="props.type === 'YYYY' ? 'year' : props.type === 'MM' ? 'month' : props.type === 'time' ? 'time' : undefined" :placeholder="props.placeholder" />
</template>
<script setup>
const emits = defineEmits(['update:value'])
const props = defineProps({
    value: String,
    placeholder: {
        type: String,
        default: '请选择',
    },
    type: {
        type: String,
        default: 'DD-DD',
    },
    showTime: {
        type: Boolean,
        default: false,
    },
})

const state = reactive({
    value: undefined,
    options: [],
})

if (props.value) {
    state.value = dayjs(props.value)
}

watch(
    () => props,
    (newVal, oldVal) => {
        if (newVal.value === undefined) {
            state.value = undefined
        } else {
            state.value = dayjs(newVal.value)
        }
    },
    { deep: true, immediate: true }
)
const inputVal = (val, item) => {
    if (item.length === 0) {
        emits('update:value', undefined)
    } else {
        emits('update:value', item)
    }
}

defineExpose({})
const { value } = toRefs(state)
</script>
